<template>
  <MyDataGroupWrapper v-bind="groupWrapperProps" ref="groupWrapperRef" @reload="handleSuccess" @change="handleChangeGroup">
    <MyAlert type="success" message="目前该功能目前没有使用" />
    <BasicTable @register="registerTable">
      <template #tableTitle>
        <a-button type="primary" preIcon="ant-design:edit-outlined" @click="handleAddGroup"> 新增数据组 </a-button>
        <a-button type="primary" preIcon="ant-design:edit-outlined" @click="handleOpenImportDbTable"> 导入 </a-button>
        <a-button type="primary" @click="handleForm(false, {})"> <Icon icon="i-ant-design:plus-outlined" /> {{ t("新增") }} </a-button>
      </template>

      <!-- <template #firstColumn="{ record }">
        <span class="cursor-pointer" @click="expandCollapse(record)">
          {{ record.areaName }}
        </span>
      </template> -->
    </BasicTable>
    <InputForm @register="registerInputFormDrawer" @success="handleSuccess" />
    <FormDetail @register="registerFormDetail" />
    <ImportDbTable @register="importDbTableDrawer" @select="handleImportTable" />
  </MyDataGroupWrapper>
</template>
<script lang="ts" name="dataset" setup>
  import { ref, nextTick, onMounted, unref } from "vue"
  import { BasicTable, BasicColumn, useTable } from "/@/components/Table"
  import { useDrawer } from "/@/components/Drawer"
  import MyAlert from "/@/components/My/MyAlert.vue"
  import { useI18n } from "/@/hooks/web/useI18n"
  import { useGlobSetting } from "/@/hooks/setting"
  import { columns, searchFormSchema } from "./data"
  import { pageDataset, deleteDataset, deleteGroup, saveOrUpdateGroup, batchDeleteGroup, importTable as importTableApi } from "/@/api/infra/dataset"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { MyDataGroupWrapper } from "/@/components/BizDataGroup"
  import InputForm from "./Form.vue"
  import FormDetail from "./Detail.vue"
  import { Icon } from "/@/components/Icon"
  import { DataGroupBizType } from "/@/components/BizDataGroup/index"
  import ImportDbTable from "/@/views/addon/onlineDev/datasource/ImportDbTable.vue"

  const { t } = useI18n("")
  const { createMessage } = useMessage()
  const groupId = ref()
  const glob = useGlobSetting()
  const [importDbTableDrawer, { openDrawer: openImportDbTableDrawer }] = useDrawer()
  const [registerInputFormDrawer, { openDrawer: openInputFormDrawer }] = useDrawer()
  const [registerFormDetail, { openDrawer: openFormDetail }] = useDrawer()
  const groupWrapperRef = ref<any>()
  const groupWrapperProps = ref<any>({
    bizType: DataGroupBizType.DATASET,
    title: "数据集组",
    deleteApi: deleteGroup,
    batchDeleteApi: batchDeleteGroup,
    saveOrUpdateApi: saveOrUpdateGroup,
  })

  const actionColumn: BasicColumn = {
    width: 160,
    title: "操作",
    dataIndex: "action",
    fixed: "right",
    slot: "tableActions",
    actions: (record: Recordable) => [
      {
        label: "删除",
        color: "error",
        ifShow: record.sendStatus != 1,
        // auth: 'sys:area:delete',
        popConfirm: {
          title: "是否确认删除",
          confirm: handleDelete.bind(null, record),
        },
      },
      {
        label: "编辑",
        // auth: 'sys:area:update',
        onClick: handleForm.bind(null, true, record),
      },
      {
        label: "详情",
        onClick: handleDetail.bind(null, record),
      },
    ],
    dropDownActions: (record: Recordable) => [],
  }

  const [registerTable, { reload, expandAll, collapseAll, expandCollapse }] = useTable({
    title: "数据集",
    api: pageDataset,
    columns: columns,
    bordered: false,
    beforeFetch: (params) => {
      params.groupId = groupId.value
      return params
    },
    formConfig: {
      baseColProps: { lg: 12, md: 12 },
      labelWidth: 60,
      schemas: searchFormSchema,
      showResetButton: false,
    },
    showTableSetting: true,
    showIndexColumn: false,
    useSearchForm: true,
    isTreeTable: false,
    pagination: true,
    immediate: false,
    canResize: true,
    rowKey: "id",
    actionColumn,
  })

  const handleDelete = async (record) => await deleteDataset({ id: record.id }, reload)
  const handleForm = (isUpdate, record) => openInputFormDrawer(true, { record, isUpdate })
  const handleDetail = (record) => openFormDetail(true, { record })
  const handleSuccess = () => reload()
  const handleAddGroup = () => groupWrapperRef.value.handleAddGroup({})
  const handleOpenImportDbTable = () => openImportDbTableDrawer(true, {})
  const handleImportTable = async (data) => {
    console.log("data", data)
    await importTableApi({ ...data, groupId: groupId.value })
    createMessage.success("导入成功")
    reload()
  }
  const handleChangeGroup = (id) => {
    groupId.value = id
    reload()
  }
</script>
